<template>
  <div class="app-container">
    <div class="title">创建问题</div>
    <div class="formbox">
      <el-form ref="ruleForm" label-position="left" label-width="80px" :model="formLabelAlign" :rules="rules" >
        <el-form-item label="问题" prop="content">
          <el-input v-model="formLabelAlign.content" type="textarea" placeholder="请输入问题"/>
        </el-form-item>
        <el-form-item label="选项A" prop="A">
          <el-input v-model="formLabelAlign.A" placeholder="请输入答案A"/>
        </el-form-item>
        <el-form-item label="选项B" prop="B">
          <el-input v-model="formLabelAlign.B" placeholder="请输入答案B"/>
        </el-form-item>
        <el-form-item label="选项C" prop="C">
          <el-input v-model="formLabelAlign.C" placeholder="请输入答案C"/>
        </el-form-item>
        <el-form-item label="选项D" prop="D">
          <el-input v-model="formLabelAlign.D" placeholder="请输入答案D"/>
        </el-form-item>
        <el-form-item label="正确答案" prop="correct">
          <el-input v-model="formLabelAlign.correct" placeholder="请输入正确答案"/>
        </el-form-item>
        <el-form-item label="答案描述" prop="describe">
          <el-input v-model="formLabelAlign.describe" type="textarea" placeholder="请输入答案描述"/>
        </el-form-item>
        <el-form-item label="正确得分" prop="add_count">
          <el-input v-model="formLabelAlign.add_count" placeholder="请输入得分"/>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button v-if="id === ':id'" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Integral',
  data() {
    return {
      formLabelAlign: {},
      id: null,
      rules: {
        content: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        A: [
          { required: true, message: '请输入分类类型', trigger: 'blur' }
        ],
        B: [
          { required: true, message: '请输入分类颜色', trigger: 'blur' }
        ],
        C: [
          { required: true, message: '请输入分类颜色', trigger: 'blur' }
        ],
        D: [
          { required: true, message: '请输入分类颜色', trigger: 'blur' }
        ],
        correct: [
          { required: true, message: '请输入分类颜色', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入分类颜色', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    const id = this.$route.params.id
    this.id = id
    this.getById(id)
  },
  methods: {
    async getById(id) {
      const res = await this.$http.get(`/cms/question/findOne?id=${id}`)
      if (res.code === 0) {
        const { content, A, B, C, D, correct, add_count, describe } = res.data
        this.formLabelAlign = { content, A, B, C, D, correct, add_count, describe }
      }
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          const res = await this.$http.put(`/cms/question/update/${this.id}`, { ...this.formLabelAlign })
          if (res.code === 0) {
            this.$message({
              message: res.message,
              type: 'success',
              duration: 2000
            })
            this.formLabelAlign = {}
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
